<div ng-controller="ProjectCtrl">
	<header style="margin:5px">
		<form class="form-inline">
			<label style="margin-left:5px">
				<input class="form-control" type="text" placeholder="请输入项目名称" ng-model="crud.p.q.name" ng-keyup="crud.p.load(true)">
			</label>
			<button class="btn btn-default" ng-click="crud.p.reset()">重置</button>
			<button class="btn btn-success pull-right" data-toggle="modal" data-target="#projectAddModal" ng-click="crud.add()">添加项目</button>
		</form>
	</header>
	<section class="table-responsive" style="overflow-y:auto">
		<table class="table table-hover" style="margin-bottom:0">
			<thead>
			<tr>
				<th></th>
				<th>项目名称</th>
				<th>项目目录</th>
				<th>数据库地址</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody>
			<tr ng-repeat="r in crud.p.data">
				<td>{{$index+1}}</td>
				<td>{{r.name}}</td>
				<td>{{r.path}}</td>
				<td>{{r.jdbcUrl}}</td>
				<td>
					<a ng-click="crud.view(r)" data-toggle="modal" data-target="#projectViewModal">查看</a>
					<a ng-click="crud.edit(r)" data-toggle="modal" data-target="#projectEditModal">修改</a>
					<a ng-click="crud.remove(r)">删除</a>
				</td>
			</tr>
			</tbody>
		</table>
	</section>
	<footer>
		<div class="flow page-ul dropup">
			<div class="btn-group">
				<button class="btn btn-default" ng-click="crud.p.first();"><i class="fa fa-step-backward"></i></button>
				<button class="btn btn-default" ng-click="crud.p.prev();"><i class="fa fa-backward"></i></button>
				<div class="btn-group">
					<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						{{crud.p.pageNumber}} / {{crud.p.pages}} <span class="caret"></span>
					</button>
					<ul class="dropdown-menu dropdown-menu-sm">
						<li ng-repeat="_ in ((_ = []) && (_.length=(crud.p.pages||0)) && _) track by $index">
							<a ng-click="crud.p.goto($index+1)">{{$index+1}} / {{crud.p.pages}}</a>
						</li>
					</ul>
				</div>
				<button class="btn btn-default" ng-click="crud.p.next();"><i class="fa fa-forward"></i></button>
				<button class="btn btn-default" ng-click="crud.p.last();"><i class="fa fa-step-forward"></i></button>
				<button class="btn btn-default" ng-click="crud.p.load();"><i class="fa fa-refresh"></i></button>
			</div>
			<div class="pull-right">
				<span class="hidden-xs">共有{{crud.p.total}}条数据，显示第{{crud.p.from}}条到第{{crud.p.to}}条，每页</span>
				<div class="btn-group">
					<button class="btn btn-default dropdown-toggle" style="min-width:55px" data-toggle="dropdown">
						{{crud.p.pageSize}} <span class="caret"></span>
					</button>
					<ul class="dropdown-menu pull-right">
						<li ng-repeat="s in [5,10,20,30,50]" style="min-width:55px"><a ng-click="crud.p.size(s)">{{s}}</a></li>
					</ul>
				</div>
				条
			</div>
		</div>
	</footer>
	<div id="projectAddModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">添加项目</h4>
				</div>
				<div class="modal-body">
					<form id="projectAddForm" class="form-horizontal" autocomplete="off" novalidate>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="add-name">项目名称</label>
							<div class="col-xs-9 col-sm-8">
								<input id="add-name" name="name" class="form-control" type="text" ng-model="crud.record.name" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="add-path">项目目录</label>
							<div class="col-xs-9 col-sm-8">
								<input id="add-path" name="path" class="form-control" type="text" ng-model="crud.record.path" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="add-jdbcDriver">JDBC驱动</label>
							<div class="col-xs-9 col-sm-8">
								<input id="add-jdbcDriver" name="jdbcDriver" class="form-control" type="text" ng-model="crud.record.jdbcDriver" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="add-jdbcUrl">数据库地址</label>
							<div class="col-xs-9 col-sm-8">
								<input id="add-jdbcUrl" name="jdbcUrl" class="form-control" type="text" ng-model="crud.record.jdbcUrl" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="add-jdbcUsername">数据库账号</label>
							<div class="col-xs-9 col-sm-8">
								<input id="add-jdbcUsername" name="jdbcUsername" class="form-control" type="text" ng-model="crud.record.jdbcUsername" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="add-jdbcPassword">数据库密码</label>
							<div class="col-xs-9 col-sm-8">
								<input id="add-jdbcPassword" name="jdbcPassword" class="form-control" type="password" ng-model="crud.record.jdbcPassword" required>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" ng-click="crud.save(crud.record)">添加</button>
				</div>
			</div>
		</div>
	</div>
	<div id="projectEditModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">修改项目</h4>
				</div>
				<div class="modal-body">
					<form id="projectEditForm" class="form-horizontal" autocomplete="off" novalidate>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="edit-name">项目名称</label>
							<div class="col-xs-9 col-sm-8">
								<input id="edit-name" name="name" class="form-control" type="text" ng-model="crud.record.name" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="edit-path">项目目录</label>
							<div class="col-xs-9 col-sm-8">
								<input id="edit-path" name="path" class="form-control" type="text" ng-model="crud.record.path" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="edit-jdbcDriver">JDBC驱动</label>
							<div class="col-xs-9 col-sm-8">
								<input id="edit-jdbcDriver" name="jdbcDriver" class="form-control" type="text" ng-model="crud.record.jdbcDriver" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="edit-jdbcUrl">数据库地址</label>
							<div class="col-xs-9 col-sm-8">
								<input id="edit-jdbcUrl" name="jdbcUrl" class="form-control" type="text" ng-model="crud.record.jdbcUrl" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="edit-jdbcUsername">数据库账号</label>
							<div class="col-xs-9 col-sm-8">
								<input id="edit-jdbcUsername" name="jdbcUsername" class="form-control" type="text" ng-model="crud.record.jdbcUsername" required>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-3" for="edit-jdbcPassword">数据库密码</label>
							<div class="col-xs-9 col-sm-8">
								<input id="edit-jdbcPassword" name="jdbcPassword" class="form-control" type="password" ng-model="crud.record.jdbcPassword" required>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" ng-click="crud.save(crud.record)">保存</button>
				</div>
			</div>
		</div>
	</div>
	<div id="projectViewModal" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title">查看项目</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal">
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">项目名称</label>
							<div class="col-xs-9 col-sm-8">
								<p class="form-control-static">{{crud.record.name}}</p>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">项目目录</label>
							<div class="col-xs-9 col-sm-8">
								<p class="form-control-static">{{crud.record.path}}</p>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">JDBC驱动</label>
							<div class="col-xs-9 col-sm-8">
								<p class="form-control-static">{{crud.record.jdbcDriver}}</p>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">数据库地址</label>
							<div class="col-xs-9 col-sm-8">
								<p class="form-control-static">{{crud.record.jdbcUrl}}</p>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">数据库账号</label>
							<div class="col-xs-9 col-sm-8">
								<p class="form-control-static">{{crud.record.jdbcUsername}}</p>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-xs-3 col-sm-4">创建时间</label>
							<div class="col-xs-9 col-sm-8">
								<p class="form-control-static">{{crud.record.createTime}}</p>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
</div>